<template>
	<view class="center" >
		<image class="banner" src="@/static/image/personalcenter/banner.png"/>
		<view class="personnel" @click="center">
			<view class="box_img"  >
				<image v-if="userInfo.avatar" :src="userInfo.avatar" ></image>
				<image v-else src="@/static/image/avatar.png" ></image>
			</view>
			<view class="right">
				<view class="name">
					<text>{{userInfo.name}}</text>
					<img src="@/static/image/right.png" />
				</view>
				<view class="tag">
					您好，欢迎回来!
				</view>
			</view>
		</view>
		<view class="card">
			<view class="box" @click="msg">
				<view class="image">
					<image src="@/static/image/personalcenter/xxzx.png"></image>
				</view>
				<view class="">
					我的消息
				</view>
			</view>
			<view class="line">
				
			</view>
			<view class="box" @click="collection">
				<view class="image">
					<image src="@/static/image/personalcenter/wdsc.png" ></image>
				</view>
				<view class="">
					我的收藏
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
			mapState
		} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		computed: {
					...mapState(['userInfo'])
				},
		created() {
			console.log(this.userInfo,'userInfo')
		},
		methods: {
			center(){
				uni.navigateTo({
				  url: "/pages/personalcenter/myMsg/myMsg",
				});
			},
			msg(){
				uni.navigateTo({
				  url: "/pages/personalcenter/message",
				});
			},
			collection(){
				uni.navigateTo({
				  url: "/pages/personalcenter/collection/collection",
				});
				
			}
		}
	}
</script>

<style lang="scss" scpred>
	.center{
		width: 750rpx;
		position: relative;
	}
.banner{
	position: absolute;
			width: 750rpx !important;
			height: 364rpx ;
			z-index: -1;
	}
.personnel{
	display: flex;
	width: 750rpx;
	box-sizing: border-box;
	// background: #000;
	padding: 60rpx  32rpx  50rpx  90rpx;
	.box_img{
		image{
			width: 120rpx;
			height: 120rpx;
			
			margin-right:40rpx;
		}
		
	}
	.right{
		// flex: 1;
		width: 480rpx;
		color: #FFFFFF;
		.name{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 44rpx;
			margin-bottom: 20rpx;
			img{
				width: 18rpx;
				height: 34rpx;
			}
		}
		.tag{
			font-size: 28rpx;
		}
	}
}
	
.card{
	box-sizing: border-box;
	margin-left: 32rpx;
	padding: 0 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 686rpx;
	height: 220rpx;
	background: #ffffff;
	border-radius: 12rpx;
	font-size: 26rpx;
	.line{
		height: 98rpx;
		border-right: 2rpx solid #ebeef5;
	}
	.box{
		width: 114rpx;
		image{
			margin-left: 8rpx;
			margin-bottom: 10rpx;
			width: 88rpx;
			height: 88rpx;
		}
	}
}

</style>
